<template>
  <!-- 我是康复训练家长界面 -->
  <div class="body" >
    <div>
      
      <div class="container" >
        <div class="card">
          <div class="content">
            <h3>听反</h3>
            <div>
              <ul
                v-infinite-scroll="load"
                class="infinite-list"
                style="overflow: auto"
              >
                <li v-for="(i,index) in count" :key="i" style="margin-bottom:10px" >
                 <a href="#">{{index+1}}. Realistic glass card hover effect, realistic glass card hover
              effect, realistic glass card hover effect,
              hover effect.</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h3>提要求</h3>
             <div>
              <ul
                v-infinite-scroll="load"
                class="infinite-list"
                style="overflow: auto"
              >
                <li v-for="(i,index) in count" :key="i" style="margin-bottom:10px" >
                 <a href="#">{{index+1}}. Realistic glass card hover effect, realistic glass card hover
              effect, realistic glass card hover effect,
              hover effect.</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h3>命名</h3>
             <div>
              <ul
                v-infinite-scroll="load"
                class="infinite-list"
                style="overflow: auto"
              >
                <li v-for="(i,index) in count" :key="i" style="margin-bottom:10px" >
                 <a href="#">{{index+1}}. Realistic glass card hover effect, realistic glass card hover
              effect, realistic glass card hover effect,
              hover effect.</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <h3>XXXX</h3>
             <div>
              <ul
                v-infinite-scroll="load"
                class="infinite-list"
                style="overflow: auto"
              >
                <li v-for="(i,index) in count" :key="i" style="margin-bottom:10px" >
                 <a href="#">{{index+1}}. Realistic glass card hover effect, realistic glass card hover
              effect, realistic glass card hover effect,
              hover effect.</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const dialogVisible = ref(false);
const dialogFormVisible = ref(true);
const formLabeWidth = "140px";

const count = ref(0)
const count2 = ref(0)

const load = () => {
  count.value += 2

}

const rowData = ref({});
const openDialog = (row) => {
  rowData.value = row;
  console.log(rowData);
  dialogFormVisible.value = true;
};

const tableData = ref([
  {
    id: 1,
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarl",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
    buzhi: "20",
    wangcheng: "10",
    text: "",
  },
  {
    id: 2,
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "老师",
    buzhi: "20",
    wangcheng: "10",
  },
  {
    id: 3,
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
    buzhi: "20",
    wangcheng: "10",
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
    buzhi: "20",
    wangcheng: "10",
  },
  {
    id: 5,
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
    buzhi: "20",
    wangcheng: "10",
  },
]);
</script>

<style  scoped>
.body {
  /* 100%窗口高度 */
  min-height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  background-color: rgb(86, 56, 106);
}
.container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px 60px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  flex-wrap: wrap;
  z-index: 1;
}
.container .card {
  /* 相对定位 */
  width: 300px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 30px;
  border-radius: 15px;
  /* 阴影 */
  /* box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5); */
  /* 溢出隐藏 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  /* border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5); */
  /* 背景模糊 */
  backdrop-filter: blur(5px);
  /* border: 1px solid red; */
  background-color: rgb(83, 116, 64);
}
.container .card .content {
  text-align: center;
  /* 默认下移+隐藏 */
  /* transform: translateY(100px); */
  /* opacity: 0; */
  transition: 0.5s;
}

.container .card .content h3 {
  /* border: 1px solid blue; */
  font-size: 28px;
  color: #fff;
  margin-top: -30px;
  margin-bottom: 10px;
}


.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
  /* border: 1px solid #fff; */
  width:270px;
  text-align: left;
  
}

</style>